
<ng-container *ngIf="!isSuccess">
    <form [formGroup]="importForm">
        <div class="import-wallet-wrapper">
            <mat-form-field appearance="outline" class="import-wallet-field">
                <mat-label>{{'Wallet.ImportWallet.Label' | translate}}</mat-label>
                <textarea formControlName="privateKey" matInput
                          [placeholder]="'Wallet.ImportWallet.EnterPrivateKey' | translate"
                          cdkTextareaAutosize>
                </textarea>
                <mat-hint>{{'Wallet.ImportWallet.PrivateKeyHint' | translate}}</mat-hint>
            </mat-form-field>
        </div>
        <div class="import-wallet-optional" *ngIf="importForm.controls['privateKey'].valid">
            <mat-divider></mat-divider>
            <div class="import-wallet-wrapper">
                <mat-form-field appearance="outline" class="account-name-field">
                    <mat-label>{{'Wallet.ImportWallet.WalletName' | translate}}</mat-label>
                    <input formControlName="name" matInput
                           [placeholder]="'Wallet.ImportWallet.EnterWalletName' | translate">
                    <mat-hint>{{'Wallet.ImportWallet.WalletNameHint' | translate}}</mat-hint>
                </mat-form-field>
            </div>
        </div>
    </form>
</ng-container>

<ng-container *ngIf="isSuccess">
    <lottie-animation-view
        [options]="lottieConfig"
        [width]="400"
        [height]="400">
    </lottie-animation-view>

    <div class="wallet-success">
        <div class="wallet-success-icon"></div>
        <div class="wallet-success-data">
            <span [innerHtml]="'Wallet.ImportWallet.SuccessImport' | translate:{'walletName': importForm.controls['name'].value}"></span>
        </div>
    </div>
</ng-container>


<div class="create-wallet-button" fxLayout="row" fxLayoutAlign="center center">
    <button *ngIf="!isSuccess" mat-button color="primary" [disabled]="!importForm.valid" (click)="doImportWallet()">
        {{'Wallet.ImportWallet.ButtonImportWallet' | translate}}
    </button>
    <button *ngIf="isSuccess" class="right" mat-button color="primary" routerLink="/wallet">
        {{ 'Wallet.ImportWallet.Back' | translate }}
    </button>
</div>
